import BaseVue from '@/lib/base/BaseVue';
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';

@Component
export default class extends BaseVue {

    // 转换到的样式class
    @Prop({
        required: true
    })
    private toClass!: string;
    // 转换进度
    @Prop({
        required: true
    })
    private progress!: number;
    // 转换X方法
    @Prop({
        default() {
            return (initRect: DOMRect, toRect: DOMRect, progress: number) => {
                // 转换左边距 -  初始左边距 
                return (toRect.left - initRect.left) * 100 * progress;
            }
        }
    })
    private transX!: (initRect: DOMRect, toRect: DOMRect, progress: number) => number;
    // 转换Y方法
    @Prop({
        default() {
            return (initRect: DOMRect, toRect: DOMRect, progress: number) => {
                // 转换上边距 -  初始上边距 
                return (toRect.top - initRect.top) * 100 * progress;
            }
        }
    })
    private transY!: (initRect: DOMRect, toRect: DOMRect, progress: number) => number;
    // 转换Scale方法
    @Prop({
        default() {
            return (initRect: DOMRect, toRect: DOMRect, progress: number) => {
                // 转换高度 -  初始高度 
                return 1 - (initRect.height - toRect.height) / initRect.height * 100 * progress;
            }
        }
    })
    private transScale!: (initRect: DOMRect, toRect: DOMRect, progress: number) => number;

    // 是否记载完毕
    private execAddClass = false;
    // 初始位置
    private initRect!: DOMRect;
    // 变换位置
    private toRect!: DOMRect;


    private scale = 1;
    private x = 0;
    private y = 0;

    private get style() {
        const style = {
            transform: `translate3d(${this.x}px,${this.y}px,0) scale(${this.scale})`,
            webkitTransform: `translate3d(${this.x}px,${this.y}px,0) scale(${this.scale})`
        };
        return style;
    }


    public render() {
        return (
            <div ref="app" class={{ [this.toClass]: this.execAddClass }} style={this.style}>
                {this.$slots.default}
            </div>
        )
    }

    public mounted() {
        this.$emit('load');
        this.init();
    }
    public init() {
        this.$nextTick(() => {
            const app = this.$refs.app as HTMLElement;
            this.initRect = app.getBoundingClientRect().toJSON();
            this.execAddClass = true;
            this.$nextTick(() => {
                this.toRect = app.getBoundingClientRect().toJSON();
                this.execAddClass = false;
            });

        });
    }

    @Watch('progress')
    private onProgressChange() {
        this.scale = this.transScale(this.initRect, this.toRect, this.progress);
        this.y = this.transY(this.initRect, this.toRect, this.progress);
        this.x = this.transX(this.initRect, this.toRect, this.progress);

    }
}
